<template>
	<view class="race">
		<view class="" style="width: 100%;height: 20rpx;">

		</view>
		<view class="top">
			<!-- <image style="width: auto; height: 220rpx;" mode="widthFix" :src="result.top_img"></image> -->
			<u--image :src="result.top_img" radius="7" width="100%" height="340rpx"></u--image>
			<u-gap height="20rpx" bgColor="#EDF5F5"></u-gap>
			<view class="postion">
				<view style="padding: 0 20rpx 0rpx;">
					<view class="" style="width: 100%;height: auto;">
						<view class="name" style="font-weight: bold;">{{ result.title }}</view>
						<view class="" style="float: right; width: 30%;">
						</view>
					</view>
					<view class="flex-align" style="margin-top: 15rpx;">
						<u-tag v-if="result.typeTag != ''" :text="result.typeTag" borderColor="#4BA677"
							bgColor=" rgba(0,0,0,0)" color=" #4BA677" size="mini"></u-tag>
						<view style="margin: 0 4rpx 0 10rpx;" v-if="result.cateTag != ''">
							<u-tag :text="result.cateTag" borderColor="#4BA677" bgColor=" rgba(0,0,0,0)"
								color=" #4BA677" size="mini"></u-tag>
						</view>
					</view>

				</view>
				<view class="notices" style="margin-top: 10rpx;">
					<u-notice-bar :text="text1" bgColor="rgba(255,255,255,1)" color="#333333" :icon="icon1">
					</u-notice-bar>

				</view>
			</view>
			<!-- <view class="notices" v-if="enroll" >
				
			</view> -->
			<u-gap height="20rpx" bgColor="#EDF5F5"></u-gap>
			<view class="section_5" v-if="enroll">
				<view style="margin-top: 30rpx;">赛道场地：{{result.yard_name}}</view>
				<view style="margin-top: 30rpx;">活动时间：{{result.activity_start_time}}-{{result.activity_end_time}}</view>
				<view style="margin-top: 30rpx;">报名对象：{{result.enroll_object}}</view>
				<view style="margin-top: 30rpx;">报名时间：{{result.enroll_start}}-{{result.enroll_end}}</view>
			</view>



			<view class="section_6" v-if="activity"></view>
			<view class="flex-center text-center" v-if="activity">
				<view class="progress flex-align" style="font-size: 30rpx;">
					<view>
						<view>活动开始</view>
						<view>12.13 15:00</view>
					</view>
					<view class="line"></view>
					<view>
						<view>活动结束</view>
						<view>12.13 15:00</view>
					</view>
				</view>
			</view>
		</view>

		<u-gap height="20rpx" bgColor="#EDF5F5"></u-gap>
		<view class="" style="margin: 0 20rpx;">
			<u-sticky>
				<u-tabs :list="tabsList" lineColor="#4BA677" :activeStyle="{
									  color: '#4BA677 ',fontWeight: 'bold',}" :inactiveStyle="{ color: '#666666',}"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :lineWidth="30"
					:current="currentTab" @click="onClickTab()" />
			</u-sticky>
		</view>
		<!-- <u-gap height="10rpx" bgColor="#F3F3F3"></u-gap> -->
		<view class="" style="margin: 0 20rpx 200rpx 20rpx;background-color: #fff;">
			<!-- 赛事介绍 -->
			<view class="detail" id="detail" v-if="signup_list === 0">
				<view class="u-content">
					<scroll-view scroll-y="true" style="width: 100%;height: 34vh;padding: 0 10rpx;">
						<u-parse :content="contents" :tagStyle="style"></u-parse>
					</scroll-view>
				</view>
			</view>

			<!-- 报名须知 -->
			<view class="notice" id="notice" v-if="signup_list === 1">
				<!-- 报名须知 -->
				<view class="u-content">
					<scroll-view scroll-y="true" style="width: 100%;height: 34vh;padding: 0 10rpx;">
						<u-parse :content="content"></u-parse>
					</scroll-view>
				</view>
			</view>
			<!-- 组织单位 -->
			<view class="schedule" id="schedule" v-if="signup_list === 2">
				<view class="nav">
					<scroll-view scroll-x="true" class="nav_box" style="margin-top: 20rpx;">
						<view class='nav_sav' v-for="items in tabsList[currentTab].content" :key="item.id">
							<view class="nav_sav_ma" style="width: 33%;left: 10%;">
								{{items.dw_type}}
							</view>
							<view class="nav_sav_ma" style="width: 33%;left:60%;">
								{{items.dw_name}}
							</view>
							<view class="nav_sav_ma" style="width: 33%;left: 100%;">
								<image style="width: 60rpx;height: 60rpx;" :src="items.dw_img" mode=""
									:data-src="items.dw_img"
									@tap.stop="previewImg($event,tabsList[currentTab].content)">
								</image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- 场次赛程 -->
			<view class="schedule" id="schedule" v-if="signup_list === 3">
				<view class="nav">
					<scroll-view scroll-x="true" class="nav_box" style="margin-top: 20rpx;">
						<view class='nav_sav' v-for="items in tabsList[currentTab].content" :key="item.id">
							<view class="nav_sav_ma" style="width: 40%;left: 10%;">
								{{items.sc_group}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:60%;">
								{{items.sc_name}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:100%;">
								{{items.sc_scale}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left: 180%;">
								<image style="width: 60rpx;height: 60rpx;" :src="items.sc_img" :data-src="items.sc_img"
									@tap.stop="previewImg($event,tabsList[currentTab].content)" mode=""></image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>

			<!-- <u-gap height="10rpx" bgColor="#F3F3F3"></u-gap> -->
			<!-- 精彩花絮 -->
			<view class="schedule" id="schedule" v-if="signup_list === 4">
				<view v-for="items in tabsList[currentTab].content" :key="item.id">
					<image style="width: 100%; " :src="items" mode=""></image>
				</view>
			</view>
			<!-- 证书 -->
			<view class="schedule" id="schedule" v-if="signup_list === 5">
				<view class="nav">
					<scroll-view scroll-x="true" class="nav_box" style="margin-top: 20rpx;">
						<view class='nav_sav' v-for="items in tabsList[currentTab].content" :key="item.id">
							<view class="nav_sav_ma" style="width: 40%;left: 10%;">
								{{items.zs_name}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:60%;">
								{{items.zs_person}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:100%;">
								{{items.zs_rule}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left: 140%;">
								<image style="width: 60rpx;height: 60rpx;" :src="items.zs_img" mode=""
									:data-src="items.zs_img"
									@tap.stop="previewImg($event,tabsList[currentTab].content)">
								</image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 成绩发布 -->
			<view class="schedule" id="schedule" v-if="signup_list === 6">
				<view class="nav">
					<scroll-view scroll-x="true" class="nav_box" style="margin-top: 20rpx;">
						<view class='nav_sav' v-for="items in tabsList[currentTab].content" :key="item.id">
							<view class="nav_sav_ma" style="width: 40%;left: 10%;">
								{{items.cj_rank}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:60%;">
								{{items.cj_name}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left:100%;">
								{{items.cj_score}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left: 140%;">
								<image style="width: 60rpx;height: 60rpx;" :src="items.cj_img" mode=""
									:data-src="items.cj_img"
									@tap.stop="previewImg($event,tabsList[currentTab].content)">
								</image>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 举办地点 -->
			<view class="schedule" id="schedule" v-if="signup_list === 7">
				<view class="nav">
					<scroll-view scroll-x="true" class="nav_box" style="margin-top: 20rpx;">
						<view class='nav_sav' v-for="items in tabsList[currentTab].content" :key="item.id">
							<view class="nav_sav_ma" style="width: 40%;left: 10%;">
								{{items.dd_name}}
							</view>
							<view class="nav_sav_ma" style="width: 40%;left: 60%;">
								<image style="width: 60rpx;height: 60rpx;" :src="items.dd_img" mode=""
									:data-src="items.dd_img"
									@tap.stop="previewImg($event,tabsList[currentTab].content)">
								</image>
							</view>

						</view>
					</scroll-view>
				</view>
			</view>

		</view>
		<!-- <view class="" style="width: 100%;height: 40rpx;"></view> -->
		<view class="footer flex-align" v-if="enroll">
			<!-- <footerLeft></footerLeft> -->
			<view class="menu" @click="backUp">
				<image mode="aspectFit" :src="icon11">
				</image>
				<text>首页</text>
			</view>

			<view class="menu">
				<u-button @click="onphone()" :plain="true" size="large" :customStyle="{
			  border: 'none',
			  display: 'flex',
			  flexDirection: 'column',
			  alignItems: 'center',
			}">
					<image mode="aspectFit" :src="icon22">
					</image>
					<text>客服</text>
				</u-button>
			</view>
			<view class="btn" @click="baoming" v-if="enrollTimes == 2">立即报名</view>
			<view class="btn_n" @click="bao_ming" v-if="enrollTimes == 1">立即报名</view>
			<view class="btn_n" @click="bao_ming" v-if="enrollTimes == 3">立即报名</view>
			<view class="btn_n" @click="bao_ming" v-if="enrollTimes == 4">立即报名</view>
		</view>
		<u-action-sheet :actions="phonelist" :closeOnClickAction="true" @close="phoneclose" :title="title"
			:show="phoneShow" @select="selectClick" :safeAreaInsetBottom="true"></u-action-sheet>
		<con-alert :show="show" @close="close" isFooter @click="buy" height="60vh" title="赛事报名">
			<view class="section">
				<view class="section-1 flex-align">
					<view class="image">
						<image :src="data.top_img"></image>
					</view>
					<view class="detail">
						<view>
							<view class="detail-1">
								{{ data.title }}
							</view>
							<view class="flex-align" style="margin-top: 30rpx">
								<view v-for="(item, index) in checkedSpec" :key="index" style="margin-right: 5rpx">
									<u-tag :text="item.name" borderColor="#4BA677" bgColor=" rgba(0,0,0,0)"
										color=" #4BA677" size="mini"></u-tag>
									<!-- <u-tag  borderColor="#4BA677" bgColor=" rgba(0,0,0,0)" color=" #X4BA677" size="mini" @click="clickSpec(item2)"></u-tag> -->
								</view>
							</view>
						</view>
						<view style="
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			  ">
							<view class="price">￥<text>{{ price }}</text>
							</view>
							<view class="detail-2">剩余名额:<text style="color: orange">{{
			      chooseStock
			    }}</text></view>
						</view>
					</view>
				</view>

				<view class="section-2" v-for="(item, index) in data.data_specs" :key="index">
					<view class="sub-title">{{ item.name }}</view>
					<view class="tag-list">
						<u-tag v-for="(item2, index2) in item.list" :key="index2" :text="item2.name" :bgColor="
			    checkedSpec.indexOf(item2) > -1
			      ? 'rgba(75, 166, 119, 0.05)'
			      : '#EFEFEF'
			  " :borderColor="
			    checkedSpec.indexOf(item2) > -1 ? '#4BA677' : 'rgba(0,0,0,0.1)'
			  " :color="checkedSpec.indexOf(item2) > -1 ? '#4BA677' : '#333'" @click="clickSpec(item2)" />
						<!-- <view class="tag" v-for="item2 in item.list" :key="item2">{{item2.name}}</view> -->

					</view>
				</view>
				<view class="btns" @click="buy" v-if="chooseStock > 0">确定</view>
				<view class="btns_s" v-if="chooseStock <= 0">确定</view>
			</view>
		</con-alert>
	</view>
</template>

<script>
	import conAlert from "@/components/com-alert/com-alert.vue";
	import footerLeft from "@/components/footer-left/footer-left.vue";
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const venues = require("@/api/venues/venues.js");
	export default {
		components: {
			conAlert,
			footerLeft,
			QSNavbar,
		},
		data() {
			return {
				icon1: this.$https.assetsPath + 'db4538ac391967bbe1a7d809b98919fc52e311aa.png',
				icon2: this.$https.assetsPath + '8cf0c9dc39599c243ea6fa98ae42d18c56ac0851.png',
				icon3: this.$https.assetsPath + '0f12c96b5bff964129aaddaec1e2fe8db7173387.png',
				icon11: this.$https.assetsPath + '862b6f9c93e65cfcb577f4a64d67ea84e4ceaab6.png',
				icon22: this.$https.assetsPath + '6cd7f6b2160dea275976ebe6b316156040267837.png',
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				text1: '',
				content: ``,
				contents: ``,
				signup_list: 0,
				result: {
					top_img: '',
					title: '',
					yard_name: '',
					activity_start_time: '',
					activity_end_time: '',
					enroll_object: '',
					enroll_start: '',
					enroll_end: '',
					tel: ''
				},
				assetsPath: this.$https.assetsPath,
				show: false,
				race_id: '',
				// data: {
				// 	name: 'CBA苏州市体育中心',
				// 	sub: '副标题',
				// 	price: 888,
				// 	rest: 8
				// },
				currentTab: 0,
				tabsList: [],

				category: [{
						text: '少儿组'
					},
					{
						text: '青年组',
						disabled: true
					}
				],
				chooseCategory: 0,
				data: {},
				checkedSpec: [],
				checkedSpecStr: "",
				price: "0.00",
				venue_id: 0,
				chooseStock: 0,
				sum: '',
				cate_type: '',
				enroll_type: '',
				enroll: false,
				activity: false,
				sku: '',
				windows: "",
				enrollTimes: '',
				phoneShow: false,
				phonelist: [{
					name: uni.getStorageSync('service_center')
				}],
				title: '拨号',
			}
		},

		onLoad(options) {
			if (options.cate_type == 'enroll') {
				this.enroll = true
			} else if (options.cate_type == 'activity') {
				this.activity = true
			}
			this.race_id = options.id
			this.cate_type = options.cate_type
			this.venue_id = options.venue_id
			this.windows = options.windows
			this.getRaceDetail(options.id)
			this.getRaceSku()
		},
		methods: {
			// 分享页面
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮

				}
				return {
					title: '苏州市体育中心',
					path: '/pages_other/race/race?owner=' + uni.getStorageSync("phone"),
					// imageUrl: 'https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/61a6df60dc329c0011115679/61a70accdc329c0011116ca9/16506941482533224078.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
				}
			},
			// 获取场馆详情
			async getRaceDetail(id, index = 0) {
				let _this = this
				uni.showLoading({
					title: "加载中",
				});
				let postData = {
					cate_type: this.cate_type,
					race_id: id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let result = await venues.getRaceDetail(postData);
				if (result.code === 1) {
					uni.hideLoading();
					_this.result = result.data.result
					// this.phonelist[0].name = _this.result.tel
					_this.text1 = _this.result.notice
					_this.content = result.data.result.protocol
					_this.contents = result.data.result.introduce
					_this.tabsList = result.data.result.tabsList
					let enroll_end = result.data.result.enroll_end
					let enroll_start = result.data.result.enroll_start
					// 获取当前时间的时间戳（Unix时间戳，单位为毫秒）
					var currentTime = new Date().getTime();
					// 假设 enroll_start 和 enroll_end 是字符串，将其转换为日期对象的时间戳
					var enrollStartTimestamp = new Date(enroll_start).getTime();
					var enrollEndTimestamp = new Date(enroll_end).getTime();
					// 比较当前时间和 enroll_start 的时间戳
					if (currentTime < enrollStartTimestamp) {
						_this.enrollTimes = 1
						console.log("报名尚未开始，enroll_start 时间尚未到达。");
					} else if (currentTime >= enrollStartTimestamp && currentTime < enrollEndTimestamp) {
						_this.enrollTimes = 2
						console.log("报名进行中，当前时间在 enroll_start 和 enroll_end 之间。");
					} else if (currentTime === enrollEndTimestamp) {
						_this.enrollTimes = 3
						console.log("报名即将结束，enroll_end 时间为当前时间。");
					} else {
						_this.enrollTimes = 4
						console.log("报名已结束，enroll_end 时间已过。", _this.enrollTimes);
					}
				}
			},
			bao_ming() {
				if (this.enrollTimes == 1) {
					uni.showToast({
						title: '报名尚未开始',
						icon: 'none',
						duration: 850
					});
				} else if (this.enrollTimes == 3) {
					uni.showToast({
						title: '报名即将结束',
						icon: 'none',
						duration: 850
					});
				} else if (this.enrollTimes == 4) {
					uni.showToast({
						title: '报名已结束',
						icon: 'none',
						duration: 850
					});
				}
			},
			baoming() {
				if (uni.getStorageSync("openid") == '') {
					uni.showToast({
						title: '请登录！',
						icon: 'none',
						duration: 850
					});
					// setTimeout(() => {
					// 	uni.reLaunch({
					// 		url: '/pages/personal/personal'
					// 	})
					// }, 1000)
				} else {
					this.show = true
				}
			},
			clickSpec(name) {
				this.checkedSpecStr = "";
				this.checkedSpec.some((item, index) => {
					if (item.group == name.group) {
						this.checkedSpec[index] = name;
						this.$forceUpdate();
					}
				});
				this.checkedSpec.forEach((item, index) => {
					this.checkedSpecStr += `${item.group}::${item.name};;`;
				});
				this.checkedSpecStr = this.checkedSpecStr.substring(
					0,
					this.checkedSpecStr.lastIndexOf(";;")
				);
				this.getSkuData(this.checkedSpecStr);
			},
			async getRaceSku() {
				uni.showLoading({
					title: "加载中",
				});
				let postDatas = {
					race_id: this.race_id,
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let res = await venues.getRaceSku(postDatas);
				if (res.code === 1) {
					uni.hideLoading();
					this.data = res.data.result
					let defaultObj = this.data.data_specs;
					let defaultObjLength = this.data.data_specs.length;
					// int sum = 0;
					var data_items = this.data.data_items
					var sum = 0;
					data_items.forEach((item, index) => {
						sum += parseFloat(item[0].stock);
						this.sum = sum
						return sum;
					})
					for (var i = 0; i < defaultObjLength; i++) {
						this.checkedSpec.push(defaultObj[i].list[0]);
					}
					this.checkedSpecStr = "";
					this.checkedSpec.forEach((item, index) => {
						this.checkedSpecStr += `${item.group}::${item.name};;`;
					});
					this.checkedSpecStr = this.checkedSpecStr.substring(
						0,
						this.checkedSpecStr.lastIndexOf(";;")
					);
					this.getSkuData(this.checkedSpecStr);
				}
			},
			// 获取SKU数据
			getSkuData(checkedSpecStr) {
				for (var items = 0; items < this.data.data_items.length; items++) {
					if (checkedSpecStr == this.data.data_items[items][0].key) {
						this.price = this.data.data_items[items][0].selling;
						this.chooseStock = this.data.data_items[items][0].else_stock;
						// this.chooseStock = this.data.data_items[items][0].else_stock;
						this.sku = this.data.data_items[items][0].sku
					}
				}
			},

			baominglist() {
				uni.navigateTo({
					url: '/choose-member/team-person'
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.signup_list = index
				// uni.pageScrollTo({
				// 	selector: '#' + this.tabsList[index].id,
				// 	offsetTop: -44
				// });
			},
			close() {
				this.show = false
			},
			buy() {
				let checkedSpec = JSON.stringify(this.checkedSpec);
				let price = this.price;
				// uni.navigateTo({
				// 	url: "/pages_other/race/choose-member/choose-member?parems=" +
				// 		parems,
				// });
				uni.navigateTo({
					url: "/pages_other/race/choose-member/choose-member?id=" +
						this.data.id +
						"&checkedSpec=" +
						checkedSpec +
						"&price=" +
						price +
						"&venue_name=" +
						this.venue_name +
						"&venue_id=" +
						this.venue_id +
						"&chooseStock=" +
						this.chooseStock +
						"&title=" +
						this.data.title +
						"&race_id=" +
						this.race_id +
						"&enroll_type=" +
						this.result.enroll_type +
						"&goods_code=" +
						this.data.goods_code +
						"&sku=" +
						this.sku +
						"&yard_name=" +
						this.result.yard_name +
						"&windows=" +
						this.windows +
						"&top_img=" +
						this.data.top_img,
				});
			},
			// 图片放大
			previewImg(e, image_array) {
				let src = e.currentTarget.dataset.src;
				if (src.indexOf("https:") != -1) {
					src = e.currentTarget.dataset.src;
				} else {
					src = "https:" + e.currentTarget.dataset.src;
				}
				let imgList = [src]; //获取data-list
				imgList &&
					imgList.map((item, index) => {
						imgList[index] = src.indexOf("https:") != -1 ? item : "https:" + item;
					});
				uni.previewImage({
					current: src,
					// 当前显示图片的http链接
					urls: imgList.length > 1 ? imgList : [src], // 需要预览的图片http链接列表
				});
			},
			onphone() {
				this.phoneShow = true
				// uni.makePhoneCall({
				// 	phoneNumber: '156510210221'
				// })
			},
			phoneclose() {
				this.phoneShow = false
			},
			selectClick() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('service_center')
				})
			},
			gophone() {
				uni.makePhoneCall({
					phoneNumber: uni.getStorageSync('service_center')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.race {
		// padding-bottom: calc(130rpx + env(safe-area-inset-bottom));
		width: 100%;
		// min-height: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		// background-color: #EDF5F5;
		background-color: #EDF5F5;

		.footer {
			position: fixed;
			width: 100%;
			background-color: white;
			bottom: 0;
			left: 0;
			padding: 20rpx 25rpx 60rpx 25rpx;
			box-sizing: border-box;

			.menu {
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 40rpx;

				image {
					width: 35rpx;
					height: 35rpx;
				}

				text {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 700;
					margin-top: 13rpx;
				}
			}

			.btn {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background: linear-gradient(270deg, #57C08B 0%, #69D1A4 100%);
				text-align: center;
				font-weight: 700;
			}

			.btn_n {
				flex: 1;
				color: rgb(255, 255, 255);
				font-size: 30rpx;
				padding: 26rpx 0;
				border-radius: 60rpx;
				background: #a6a6a6;
				text-align: center;
				font-weight: 700;
			}
		}

		.top {
			// background: #FFFFFF;
			border-radius: 30rpx 30rpx 0px 0px;
			// padding: 0 30rpx 0rpx;
			// margin-top: -30rpx;
			// width: 100%;
			position: relative;
			// width: 100%;
			background-color: #fff;
			margin: 0 20rpx;

			>image {
				display: block;
				width: 100%;
				height: 340rpx !important;
				// margin-left: 20rpx;
			}

			.postion {
				// position: absolute;
				width: 100%;
				// top: 360rpx;
				// left: 0;
				box-sizing: border-box;
				margin-top: 20rpx;
			}
		}

		.goods {
			.name {
				font-size: 28rpx;
				margin-left: 10rpx;
				margin: 30rpx 0 40rpx;
			}

			.sub {
				margin: 30rpx 0 40rpx;
				font-size: 24rpx;
				color: rgb(153, 153, 153);
			}

			.rest {
				color: #333333;
				font-size: 22rpx;
				margin-right: 10rpx;
				// margin-top: -80rpx;
			}

			#share {
				width: 40rpx;
				height: 40rpx;
				margin: 0 auto;
				position: absolute;
				top: 166px;
				right: 47px;
			}

			// #shareBtn {
			// 				width: 150rpx;
			// 				height: 120rpx;
			// 				position: absolute;
			// 				border-radius: 50%;
			// 				top: 0;
			// 				left: -2rpx;
			// 				opacity: 0.01;
			// 				text-align: center;
			// 				line-height: 60rpx;
			// 				color: #333333;
			// 				font-size: 22rpx;
			// 				z-index: 999;
			// 			}
			#shareBtn {
				width: 150rpx;
				height: 150rpx !important;
				position: absolute;
				border-radius: 50%;
				top: 0;
				left: -2rpx;
				// opacity: 0.01;
				// text-align: center;
				// line-height: 60rpx;
				color: #333333;
				font-size: 22rpx;
				// z-index: 999;
			}
		}

		.section_5 {
			// margin-top: 30rpx;
			padding: 20rpx 20rpx 20rpx;
			font-size: 24rpx;
			font-weight: 500;
			line-height: 23rpx;
			border-radius: 5rpx;
			background-image: url('https://oss.szsportscenter.cn/img/3eb50fcfa673956a7bdc252c9e005f126c00b4a5.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
		}

		.section_6 {
			margin-top: 2rpx;
			padding: 2rpx 31rpx 40rpx;
		}

		.progress {
			// width: 500rpx;
			// height: 70rpx;/
			// background-color: #888;
			font-size: 24rpx;
			white-space: nowrap;

			// margin-right: 400rpx;
			.line {
				width: 40rpx;
				height: 6rpx;
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				border-radius: 10px;
				margin: 0 10rpx;
			}
		}

		.notify {
			font-size: 24rpx;
		}

		/deep/.u-tabs {
			padding: 0 10rpx;
			background-color: #fff;
		}

		.detail,
		.notice,
		.schedule {
			// padding: 0rpx 30rpx 30rpx 30rpx;
		}

		.notice,
		.schedule {
			font-size: 26rpx;

			.title {
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			/deep/.u-row {
				&+.u-row {
					margin-top: 20rpx;
				}
			}
		}

		.notice {
			.label {
				color: #BEBEBE;
			}
		}

		.schedule {
			.value {
				color: #888;
			}

			.schedule-item {
				&+.schedule-item {
					margin-top: 50rpx;
				}
			}
		}

		.section {
			.btns {
				background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 20rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.btns_s {
				background: linear-gradient(0deg, #bebebe, #bebebe);
				border-radius: 20px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
				padding: 20rpx 0;
				margin: 0px 30rpx;
				margin-top: 120rpx;
				text-align: center;
			}

			.section-1 {
				height: 170rpx;

				.image {
					width: 300rpx;
					height: 170rpx;
					margin-right: 26rpx;
					border-radius: 10rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.detail {
					flex: 1;
					width: 0;
					display: flex;
					height: 100%;
					flex-direction: column;
					justify-content: space-between;

					.detail-1 {
						font-size: 27rpx;
						font-weight: 500;
						color: #333333;
					}

					.detail-2 {
						font-size: 24rpx;
						font-weight: 500;
						color: #888888;
						margin-top: 12rpx;
					}

					.price {
						font-size: 20rpx;
						font-weight: 500;
						color: #4BA677;

						text {
							font-size: 32rpx;
							font-weight: 700;
						}
					}
				}
			}

			.section-2 {
				margin-top: 50rpx;

				.sub-title {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 20rpx;
				}

				.tag-list {
					display: flex;
					flex-wrap: wrap;

					/deep/.u-tag {
						margin-left: 30rpx;
						margin-bottom: 30rpx;
					}

					// .tag{
					// 	background: #EFEFEF;
					// 	border-radius: 3px;
					// 	font-size: 24rpx;
					// 	font-weight: 500;
					// 	color: #FFFFFF;
					// 	padding: 7rpx 20rpx;
					// 	margin-right: 20rpx;
					// 	margin-bottom: 20rpx;
					// }
				}
			}

			.section-3 {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
		}

		// .popup {
		// 	.popup-content {
		// 		padding: 30rpx;
		// 		height: 51vh;
		// 		overflow: auto;

		// 		.choose-category {
		// 			height: 25vh;
		// 			margin-top: 50rpx;

		// 			/deep/.u-tag {
		// 				margin-left: 30rpx;
		// 				margin-bottom: 30rpx;
		// 			}
		// 		}
		// 	}

		// 	.rest {
		// 		padding: 20rpx 30rpx;
		// 		width: calc(100% + 60rpx);
		// 		transform: translateX(-30rpx);
		// 		background-color: #EFEFEF;
		// 		font-size: 22rpx;
		// 		// margin-top: -30rpx;
		// 	}

		// }
		/* 中间nav */
		.nav {
			width: 100%;
			height: 600rpx;
			overflow-x: hidden;
			// border-bottom: 2rpx solid #f2f2f2;
			// border-right: 2rpx solid #f2f2f2;
			position: relative;
		}

		.nav_box {
			width: 100%;
			height: 600rpx;
			float: left;
			overflow: hidden;
		}

		.nav_sav {
			width: 100%;
			height: 70rpx;
			position: relative;
			// margin: 20rpx auto;
			white-space: nowrap
		}

		.nav_san {
			width: auto;
			height: 80rpx;
			position: relative;
			margin: 40rpx auto;
			white-space: nowrap;
			background-color: #f3f3f3;
		}

		.nav_san_ma {
			height: 80rpx;
			background-color: #f3f3f3;
			width: auto;
			position: absolute;
			text-align: center;
			font-weight: bold;
			line-height: 80rpx;
		}

		.nav_sav_ma {
			position: absolute;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/deep/.u-button--disabled {
			background: #dcdcdc !important;
			opacity: 1;
			// width: 60% !important;
		}

		.notices /deep/ .u-icon__img {
			width: 60rpx !important;
			height: 30rpx !important;
		}

		.u-content {
			// padding:0 30rpx;
			font-size: 28rpx;
		}
	}

	.menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 20rpx;

		image {
			width: 35rpx;
			height: 35rpx;
		}

		text {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 700;
			margin-top: 13rpx;
		}
	}

	button {
		margin: unset;
		padding: unset;
		background: unset;
	}

	button:after {
		border: unset;
	}

	.avatar-wrapper {
		border: none !important;
		border: none;
		/* 去掉边框 */
		/* 设置背景色为透明 */
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		&::after {
			display: none;
		}
	}
</style>